今天我們要針對專案架構做一個基本的認識，而下篇會講一些 React 的基礎觀念，例如如何建立一個元件、如何在 React 專案裡添加樣式、如何由父元件傳值給子組件等等

Gatsby 的專案結構

現在請各位看倌點開我們建立的初始專案，我們現在就針對裡面的檔案做功用的說明，避免往後開發時出現如下圖般的窘境

點開專案後，我們能看到如下的結構，現在就讓我們來一一介紹

|-- /.cache
|-- /node_modules
|-- /public
|-- /src
    |-- /pages
    	  |-- index.js
|-- /static
|-- .prettierignore
|-- .prettierrc
|-- gatsby-config.js
|-- package-lock.json
|-- package.json
|-- README.md

/.cache -> 此目錄為系統自動生成，是 Gatsby 自動創建的快取，不建議使用者去做異動。

/node_modules -> 本專案在 NPM 下載 Plugin / Library 的存放位置。

/public -> 此目錄為系統自動生成，會將原始碼編譯後輸出至此資料夾。

/src -> 此目錄放置使用者開發的原始碼 ( 元件、樣式、模板等等各式各樣使用者開發的檔案 )，此目錄會經由編譯後輸出至 /public

.prettierignore -> Gatsby 官方推薦的 VS Code Plugin Prettier，此外掛的功用是用來格式化你的代碼，而此文件是用來設置忽略一些不想被格式化的檔案。

.prettierrc -> 說明同 prettierignore ，此文件是用來設置格式化的規則。

gatsby-config.js -> 是 Gatsby 對網站的設定檔，可以在這邊設定 Meta 資訊及引用所要使用的 Gatsby 外掛，更多的功能如添加路徑前綴、Polyfill、Mapping、Proxy 就不在此處多贅述，待之後有使用到再來補充說明。

• 設定 Meta 方式如下

module.exports = {
  siteMetadata: {
    title: `雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js`,
    siteUrl: `https://ithelp.ithome.com.tw/users/20109495/ironman/3794`,
    description: `12th 鐵人賽 Modern Web 組 系列文章`,
  },
}

package.json -> 記錄你專案的名稱、描述、版本等資訊，以及安裝的 Plugin / Library 與 Script 的指令。

package-lock.json -> 會記錄你所安裝的 Plugin / Library 詳細版本及 tarball 是從哪個 Url 所抓的，再每次執行 npm install / uninstall /update 操作時，都會進行更新。

README.md -> md 是 Markdown 的縮寫，簡單來說就是使用說明書。

鐵人賽的第一個週末，對於沒有存稿的我，好痛苦 RRRR

前面幾篇會稍微枯燥乏味些，會比較偏向說明，因為筆者我習慣先將文件概覽過，對於整個 Library 有個大概的認識與注意到可能會踩雷的地方，才開始進行實作，不然三步一小雷、五步一大坑，實在是會捶心肝，怨嘆自己為什麼當初沒有好好地看文件，到後面的章節才會慢慢帶入實作的部分，希望各位看倌在讀完這系列的文章，都能用 Gatsby 實作出自己的部落格。

參考資料

Conceptual Guide